<template>
	<view>
		<view class="bill">
			<scroll-view class="scroll-box" :scroll-y="true" :show-scrollbar="false" :enhanced="true" @scrolltolower="more">
				<view class="z-flex-c-s-b each z-padding-tb-24 z-padding-lr-32 z-margin-t-24" v-for="(item,index) in list">
					<view>
						<view class="title">{{ item.memo }}</view>
						<view class="time z-margin-t-8">{{ item.createtime | date('yyyy-mm-dd hh:MM') }}</view>
					</view>
					<view class="money" v-if="tool.includes(item.money,'-')">{{ item.money }}</view>
					<view class="money" v-else>+{{ item.money }}</view>
				</view>
				<!-- <van-empty description="暂无记录" wx:if="{{finish && list.length === 0}}" /> -->
				<u-empty v-if="finish && list.length === 0" text="列表为空" mode="list"></u-empty>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [],
			finish: false,
			loading: false,
			page: 1
		};
	},
	onLoad(options) {
		this.reload();
	},
	methods: {
		reload() {
			this.list = [],
			this.page = 1,
			this.finish = false
			this.getList();
		},
		more() {
			this.page = ++this.page
			this.getList();
		},
		getList() {
			if (!uni.getStorageSync('token')) return;
			if (this.finish) {
				return;
			}
			if (this.loading) {
				return;
			}
			this.loading = true
			let data = {
				page: this.page,
				type: 0
			};
			this.http.get('ensure/ensurelog', data)
				.then((res) => {
					if (res.data.length === 0) {
						this.finish = true
					}
					let arr = this.list.concat(res.data);
					this.list = arr
				})
				.finally((res) => {
					this.loading = false
				});
		}
	}
};
</script>

<style>
page {
	background-color: #edf1f4;
}
.bill {
	height: 100vh;
	/* #ifdef H5 */
	height: calc(100vh - 90rpx);
	/* #endif */
}
.scroll-box {
	height: 100%;
}
.each {
	width: 622rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	margin: auto;
}
.title {
	font-size: 30rpx;
	font-weight: bold;
	color: #1c274c;
}
.time {
	font-size: 24rpx;
	font-weight: 500;
	color: #a4a9b7;
}
.money {
	font-size: 30rpx;
	font-weight: bold;
	color: #1677ff;
}
</style>
